<template>
  <div class="flex flex-col relative h-full demo01-bg px-[26px] pb-[16px] box-border">
    <Demo01Menu class="h-[61px]" title="生产指挥驾驶舱" :leftMenuArr="leftMenuArr"></Demo01Menu>
    <Demo01BreadPath class="h-[40px] mb-[16px]"></Demo01BreadPath>
    <slot></slot>
    <div
      class="absolute bottom-0 left-0 right-0 bg-[length:100%_100%] h-[16px] bg-bottomSiderBg bg-no-repeat"
    ></div>
  </div>
</template>

<script setup lang="ts">
import type { MenuItemInfo } from './typing'

const leftMenuArr = ref<MenuItemInfo[]>([
  { title: '能源消耗', children: [{ title: '1' }] },
  { title: '科研项目' }
])
</script>

<style scoped></style>
